<script setup lang="ts" name="VerifySlide" generic="VerifySlide">
/**
 * VerifySlide
 * @description 滑块
 */
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { aesEncrypt } from './../utils/ase'
import { resetSize } from './../utils/util'
import { checkCaptcha, getCaptcha } from '../../../../api/login'
import { useI18n } from '../utils/i18n'

const props = defineProps({
  captchaType: {
    type: String,
  },
  type: {
    type: String,
    default: '1',
  },
  // 弹出式pop，固定fixed
  mode: {
    type: String,
    default: 'fixed',
  },
  vSpace: {
    type: Number,
    default: 5,
  },
  explain: {
    type: String,
    default: '',
  },
  imgSize: {
    type: Object,
    default() {
      return {
        width: '310px',
        height: '155px',
      }
    },
  },
  blockSize: {
    type: Object,
    default() {
      return {
        width: '50px',
        height: '50px',
      }
    },
  },
  barSize: {
    type: Object,
    default() {
      return {
        width: '310px',
        height: '30px',
      }
    },
  },
})

const { t } = useI18n()
const { mode, captchaType, type, blockSize, explain } = toRefs(props)
const instance = getCurrentInstance()
const proxy = instance?.proxy
const secretKey = ref('') // 后端返回的ase加密秘钥
const passFlag = ref<string | boolean>('') // 是否通过的标识
const backImgBase = ref('') // 验证码背景图片
const blockBackImgBase = ref('') // 验证滑块的背景图片
const backToken = ref('') // 后端返回的唯一token值
const startMoveTime = ref<any>('') // 移动开始的时间
const endMovetime = ref<any>('') // 移动结束的时间
const tipWords = ref('')
const text = ref('')
const finishText = ref('')
const setSize = reactive({
  imgHeight: 0,
  imgWidth: 0,
  barHeight: 0,
  barWidth: 0,
})
const moveBlockLeft = ref<string | undefined>(undefined)
const leftBarWidth = ref<string | undefined>(undefined)
// 移动中样式
const moveBlockBackgroundColor = ref<string | undefined>(undefined)
const leftBarBorderColor = ref('#ddd')
const iconColor = ref<string | undefined>(undefined)
const iconClass = ref('icon-right')
const status = ref(false) // 鼠标状态
const isEnd = ref(false) // 是否验证完成
const showRefresh = ref(true)
const transitionLeft = ref('')
const transitionWidth = ref('')
const startLeft = ref(0)

const barArea = computed(() => {
  return proxy?.$el.querySelector('.verify-bar-area')
})

function init() {
  if (explain.value === '')
    text.value = t('component.captcha.slide')
  else
    text.value = explain.value

  getPictrue()
  nextTick(() => {
    const { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
    setSize.imgHeight = imgHeight
    setSize.imgWidth = imgWidth
    setSize.barHeight = barHeight
    setSize.barWidth = barWidth
    proxy && proxy.$parent && proxy.$parent.$emit('ready', proxy)
  })

  window.removeEventListener('touchmove', (e) => {
    move(e)
  })
  window.removeEventListener('mousemove', (e) => {
    move(e)
  })

  // 鼠标松开
  window.removeEventListener('touchend', () => {
    end()
  })
  window.removeEventListener('mouseup', () => {
    end()
  })

  window.addEventListener('touchmove', (e) => {
    move(e)
  })
  window.addEventListener('mousemove', (e) => {
    move(e)
  })

  // 鼠标松开
  window.addEventListener('touchend', () => {
    end()
  })
  window.addEventListener('mouseup', () => {
    end()
  })
}

watch(type, () => {
  init()
})

onMounted(() => {
  // 禁止拖拽
  init()
  if (proxy?.$el) {
    proxy.$el.onselectstart = function () {
      return false
    }
  }
})

// 鼠标按下
function start(e: any) {
  e = e || window.event
  let x
  if (!e.touches) {
    // 兼容PC端
    x = e.clientX
  }
  else {
    // 兼容移动端
    x = e.touches[0].pageX
  }
  startLeft.value = Math.floor(x - barArea.value?.getBoundingClientRect().left)
  startMoveTime.value = +new Date() // 开始滑动的时间
  if (isEnd.value === false) {
    text.value = ''
    moveBlockBackgroundColor.value = '#337ab7'
    leftBarBorderColor.value = '#337AB7'
    iconColor.value = '#fff'
    e.stopPropagation()
    status.value = true
  }
}

// 鼠标移动
function move(e: any) {
  e = e || window.event
  let x
  if (status.value && isEnd.value === false && barArea.value) {
    if (!e.touches) {
      // 兼容PC端
      x = e.clientX
    }
    else {
      // 兼容移动端
      x = e.touches[0].pageX
    }

    const bar_area_left = barArea.value.getBoundingClientRect().left
    let move_block_left = x - bar_area_left // 小方块相对于父元素的left值

    // 限制滑块的最大移动距离
    if (move_block_left >= barArea.value.offsetWidth - parseInt(blockSize.value.width)) {
      move_block_left = barArea.value.offsetWidth - parseInt(blockSize.value.width);
    }

    // 限制最小距离
    if (move_block_left <= 0) {
      move_block_left = 0;
    }

    // 移动滑块和进度条
    moveBlockLeft.value = `${move_block_left}px`
    leftBarWidth.value = `${move_block_left}px`
  }
}

// 鼠标松开
function end() {
  endMovetime.value = +new Date()
  // 判断是否重合
  if (status.value && isEnd.value === false && moveBlockLeft.value) {
    let moveLeftDistance = Number.parseInt(moveBlockLeft.value.replace('px', ''))
    moveLeftDistance = (moveLeftDistance * 310) / Number.parseInt(String(setSize.imgWidth))
    const data = {
      captchaType: captchaType?.value,
      pointJson: secretKey.value
        ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value)
        : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
      token: backToken.value,
    }
    checkCaptcha(data).then((response) => {
      const res = response.data
      if (res.repCode === '0000') {
        moveBlockBackgroundColor.value = '#5cb85c'
        leftBarBorderColor.value = '#5cb85c'
        iconColor.value = '#fff'
        iconClass.value = 'icon-check'
        showRefresh.value = false
        isEnd.value = true
        if (mode.value === 'pop' && proxy?.$parent) {
          setTimeout(() => {
            (proxy.$parent as any).clickShow = false
            refresh()
          }, 1500)
        }
        passFlag.value = true
        tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s
            ${t('component.captcha.success')}`
        const captchaVerification = secretKey.value
          ? aesEncrypt(`${backToken.value}---${JSON.stringify({ x: moveLeftDistance, y: 5.0 })}`, secretKey.value)
          : `${backToken.value}---${JSON.stringify({ x: moveLeftDistance, y: 5.0 })}`
        setTimeout(() => {
          tipWords.value = ''
          if (proxy?.$parent) {
            (proxy.$parent as any).closeBox()
            proxy.$parent.$emit('success', { captchaVerification })
          }
        }, 1000)
      }
      else {
        moveBlockBackgroundColor.value = '#d9534f'
        leftBarBorderColor.value = '#d9534f'
        iconColor.value = '#fff'
        iconClass.value = 'icon-close'
        passFlag.value = false
        tipWords.value = t('component.captcha.fail')
        setTimeout(() => {
          refresh()
        }, 1000)
      }
    })
    status.value = false
  }
}

let timeout: any
// 刷新
const refresh = async function () {
  // 初始化
  if (proxy?.$parent) {
    (proxy.$parent as any).clickShow = true
  }
  isEnd.value = false
  moveBlockLeft.value = undefined
  leftBarWidth.value = undefined
  moveBlockBackgroundColor.value = undefined
  leftBarBorderColor.value = '#ddd'
  iconColor.value = undefined
  iconClass.value = 'icon-right'
  if (timeout) clearTimeout(timeout)
  await getPictrue()
  showRefresh.value = true
  startMoveTime.value = ''
}

// 获取图片
const getPictrue = async function () {
  try {
    const data = {
      captchaType: captchaType?.value || 'blockPuzzle',
    }
    console.log('发送验证码请求:', data);
    const res = await getCaptcha(data)

    // 调试信息打印
    console.log('验证码响应数据:', res.data)

    if (res.data && res.data.repCode === '0000') {
      console.log('验证码获取成功');

      // 确保图片数据正确处理
      if (res.data.repData && res.data.repData.originalImageBase64) {
        // 检查返回的base64数据是否包含前缀，如果包含则去除
        let originalImage = res.data.repData.originalImageBase64;
        let jigsawImage = res.data.repData.jigsawImageBase64;

        // 如果包含data:前缀，提取纯base64部分
        if (originalImage.includes('data:image')) {
          originalImage = originalImage.split(',')[1];
        }

        if (jigsawImage.includes('data:image')) {
          jigsawImage = jigsawImage.split(',')[1];
        }

        backImgBase.value = originalImage;
        blockBackImgBase.value = jigsawImage;
        backToken.value = res.data.repData.token;
        secretKey.value = res.data.repData.secretKey;

        console.log('处理后的背景图片base64长度:', backImgBase.value?.length);
        console.log('处理后的滑块图片base64长度:', blockBackImgBase.value?.length);
      } else {
        console.log('使用测试图片数据');
        backImgBase.value = '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';
        blockBackImgBase.value = 'iVBORw0KGgoAAAANSUhEUgAAABUAAAAyCAYAAACzvpAYAAAA1UlEQVR4Ae3WwQaEQBCF4TnJIXp5j57vTklJj7M5Qg+zu5lKKsuMq1+Rxfu39TPVYqHxFtdgzK5BktS3WMcK9nWspfYtBrw1lHlL/QMRRQyjYwk1H1GTgYkhVE1FrXxkhFS9RUXxwIioGYo6/jAqamWiLi6MjKqdqNOr05G6Uf8cFvmqtl9RlWO6KRpSn0SdOkT1ASLqMpxf4+ZiFKKS/ZXIVzHKUeE2USb/f0EGXC8cDY/CxxS8NkS3GXjPwaQ1eG+LbnvwWQY0WIXPVxXXFfipCv5Wh18wETTNBeEAAAAASUVORK5CYII=';
        backToken.value = 'testtoken123456';
        secretKey.value = 'testsecretkey123456';
      }
    }
    else {
      console.error('获取验证码失败:', res.data)
      // 使用测试数据作为备用
      backImgBase.value = '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';
        blockBackImgBase.value = 'iVBORw0KGgoAAAANSUhEUgAAABUAAAAyCAYAAACzvpAYAAAA1UlEQVR4Ae3WwQaEQBCF4TnJIXp5j57vTklJj7M5Qg+zu5lKKsuMq1+Rxfu39TPVYqHxFtdgzK5BktS3WMcK9nWspfYtBrw1lHlL/QMRRQyjYwk1H1GTgYkhVE1FrXxkhFS9RUXxwIioGYo6/jAqamWiLi6MjKqdqNOr05G6Uf8cFvmqtl9RlWO6KRpSn0SdOkT1ASLqMpxf4+ZiFKKS/ZXIVzHKUeE2USb/f0EGXC8cDY/CxxS8NkS3GXjPwaQ1eG+LbnvwWQY0WIXPVxXXFfipCv5Wh18wETTNBeEAAAAASUVORK5CYII=';
        backToken.value = 'testtoken123456';
        secretKey.value = 'testsecretkey123456';
        tipWords.value = res.data?.repMsg || '获取验证码失败'
      }
    }

   catch (error) {
    console.error('获取验证码异常:', error)
    // 使用测试数据作为备用
    backImgBase.value = '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';
        blockBackImgBase.value = 'iVBORw0KGgoAAAANSUhEUgAAABUAAAAyCAYAAACzvpAYAAAA1UlEQVR4Ae3WwQaEQBCF4TnJIXp5j57vTklJj7M5Qg+zu5lKKsuMq1+Rxfu39TPVYqHxFtdgzK5BktS3WMcK9nWspfYtBrw1lHlL/QMRRQyjYwk1H1GTgYkhVE1FrXxkhFS9RUXxwIioGYo6/jAqamWiLi6MjKqdqNOr05G6Uf8cFvmqtl9RlWO6KRpSn0SdOkT1ASLqMpxf4+ZiFKKS/ZXIVzHKUeE2USb/f0EGXC8cDY/CxxS8NkS3GXjPwaQ1eG+LbnvwWQY0WIXPVxXXFfipCv5Wh18wETTNBeEAAAAASUVORK5CYII=';
        backToken.value = 'testtoken123456';
        secretKey.value = 'testsecretkey123456';
        tipWords.value = '获取验证码失败，请刷新重试'
    }
  }
defineExpose({
  refresh,
})
</script>

<template>
  <div style="position: relative">
    <div v-if="type === '2'" class="verify-img-out" :style="{ height: `${parseInt(setSize.imgHeight.toString()) + vSpace}px` }">
      <div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">
        <img v-if="backImgBase" :src="`data:image/png;base64,${backImgBase}`" alt="验证背景" style=" display: block;width: 100%; height: 100%">
        <div v-show="showRefresh" class="verify-refresh" @click="refresh">
          <i class="iconfont icon-refresh" />
        </div>
        <transition name="tips">
          <span v-if="tipWords" class="verify-tips" :class="passFlag ? 'suc-bg' : 'err-bg'">
            {{ tipWords }}
          </span>
        </transition>
      </div>
    </div>
    <!-- 公共部分 -->
    <div class="verify-bar-area" :style="{ 'width': setSize.imgWidth, 'height': barSize.height, 'line-height': barSize.height }">
      <span class="verify-msg" v-text="text" />
      <div
        class="verify-left-bar"
        :style="{
          'width': leftBarWidth !== undefined ? leftBarWidth : barSize.height,
          'height': barSize.height,
          'border-color': leftBarBorderColor,
          'transition': transitionWidth,
        }"
      >
        <span class="verify-msg" v-text="finishText" />
        <div
          class="verify-move-block"
          :style="{
            'width': barSize.height,
            'height': barSize.height,
            'background-color': moveBlockBackgroundColor,
            'left': moveBlockLeft,
            'transition': transitionLeft,
          }"
          @touchstart="start"
          @mousedown="start"
        >
          <i class="iconfont verify-icon" :class="[iconClass]" :style="{ color: iconColor }" />
          <div
            v-if="type === '2'"
            class="verify-sub-block"
            :style="{
              'width': `${Math.floor((parseInt(setSize.imgWidth.toString()) * 47) / 310)}px`,
              'height': setSize.imgHeight,
              'top': `-${parseInt(setSize.imgHeight.toString()) + vSpace}px`,
              'background-size': `${setSize.imgWidth} ${setSize.imgHeight}`,
            }"
          >
          <img v-if="blockBackImgBase" :src="`data:image/png;base64,${blockBackImgBase}`" alt="滑块" style="display: block; width: 100%; height: 100%; -webkit-user-drag: none;">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue"
export default _defineComponent({
  name: 'VerifySlide',
})
</script>
